<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        .box{
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    
    <!-- <textarea cols="30" rows="10" id="a">aaaaaaaaa</textarea> -->
    <!-- textarea 标签没有 html标签属性value -->
    <!-- <textarea cols="30" rows="10" value="aaaaaaaaa"></textarea> -->
    <hr>
    <div id="app">
        <pre v-pre class="note">
        v-model 为 v-bind 和 v-on 的语法糖操作，可以在页面开发时一次性完成属性和事件的同时绑定
            + v-model的属性绑定和v-bind存在细微操作差别
            + v-model的事件绑定和v-on存在细微操作差别
        
        v-model指令只能被应用于表单操作元素【input:text,input:radio,input:checkbox,textarea,select……】
        v-model指令对表单元素的操作行为，会因为不同功能的表单元素存在绑定差别
        v-model指令的=取值不能定义除变量以外的其它数据格式

        v-model 使用
            1、输入标签的操作
            2、选择标签的操作
        </pre>
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <hr>
        <!-- <p v-model="msg"></p> -->
        <!-- <input type="button" value="按钮" v-model="msg"> -->

        <h4>输入标签的v-model操作</h4>
        <h5>input输入框</h5>
        <!-- 
            color,number,date,range…… 都输于类似于 text 的输入框元素 
                => 在vue中v-model操作是相同的
                => 特殊类型的输入框应该提供对应的有效取值
        -->
        <pre>
            1、完成value属性的响应式取值绑定
            2、完成input输入框的input事件绑定，同时将输入值重新赋值到绑定变量上
        </pre>
        <p>info:{{ info }}</p>
        <input type="text" v-bind:value="info" v-on:input=" info=$event.target.value ">
        <br>
        <input type="text" v-bind:value="info+'.end'" v-on:input=" info=$event.target.value ">
        <br>
        <input type="text" v-model="info">
        <!-- <br>
        <input type="text" v-model="info+'.end'"> -->
        <br><br>
        <div class="box" :style="`background-color:${color};`"></div>
        <br>
        <input type="color" :value="color" @input="color=$event.target.value">
        <br>
        <input type="color" v-model="color">

        <h5>textarea输入框</h5>
        <pre>
            1、完成value属性的响应式取值绑定
            2、完成textarea的input事件绑定，同时将输入值重新赋值到绑定变量上
        </pre>
        <!-- <textarea cols="30" rows="10">aaaaaaaaa</textarea>-->
        <!-- vue模板中 textarea标签无论是静态value定义，还是动态value绑定，都是针对于DOM的value属性  -->
        <!-- <textarea cols="30" rows="10" value="aaaaaaaaa"></textarea>
        <textarea cols="30" rows="10" :value=" 'aaaaaaaaa' "></textarea>
        <textarea cols="30" rows="10" :value.prop=" 'aaaaaaaaa' "></textarea> -->

        <!-- <textarea cols="30" rows="10">{{ text }}</textarea> -->
        <pre>{{ text }}</pre>
        <textarea cols="30" rows="10" :value="text" @input="text=$event.target.value"></textarea>
        <br>
        <textarea cols="30" rows="10" v-model="text"></textarea>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"消息",
                    info:"info变量",
                    // color:"#00ff00",
                    color:"red", // red颜色别名对于 color 输入框为无效取值
                    text:"第一行\n第二行"
                }
            }
        }).mount("#app");
    </script>
</body>
</html>